<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/travelfilter.css" rel="stylesheet" type="text/css">
    <link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
    <script>
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        function queryForm(name, t) {
            var cl = "on";
            var tagId = $(t).data("id");
            $("." + name).removeClass(cl);
            $(t).addClass(cl);

            var arr = $.map($(".on"), function (n) {
                return $(n).data("id");
            })

            //将id拼接成字符串 ,  使用 , 分割
            var strs = arr.join(",");

            $("#tagId").val(strs);

            $("#searchForm").submit();
        }

        $(function () {
            var id = getQueryString("id");
            var ids = $("#tagId").val().split(",");
            if (id != null) {
                $(".tag").each(function (a) {
                    if (id == (a + 1)) {
                        var className = $(this).attr("class");
                        var strs = className.split(" ");
                        $("." + strs[0]).removeClass("on");
                        $(this).addClass("on");
                    }
                })
            } else {
                $(".tag").each(function (a) {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i] == (a + 1)) {
                            var className = $(this).attr("class");
                            var strs = className.split(" ");
                            $("." + strs[0]).removeClass("on");
                            $(this).addClass("on");
                        }
                    }
                })
            }

        })

    </script>
</head>

<body>
<#assign currentNav="destination">
<#include "../common/navbar.ftl">
<div class="container">
    <div class="row-top">
        <div class="wrapper">
            <div class="top-bar">
                <div class="crumb">
                    <div class="item"><a href="javascript:;" target="_blank">目的地</a><em>&gt;</em></div>
                    <div class="item cur">目的地筛选</div>
                </div>
            </div>
            <div class="filter-title">目的地筛选</div>
            <div class="filter-nav">
                <dl class="clearfix">
                    <dt>时间</dt>
                    <dd class="J_dd">
                        <div class="month clearfix">
                            <a class="valueChanged1 on" href="javascript:"
                               onclick="queryForm('valueChanged1',this);">不限</a>
                            <#list month as m>
                                <a href="javascript:;" onclick="queryForm('valueChanged1',this);"
                                   class="valueChanged1 tag"
                                   data-id="${m.id}">${m.name}</a>
                            </#list>
                        </div>
                        <div class="festival clearfix">
                            <#list festival as f>
                                <a href="javascript:" onclick="queryForm('valueChanged1',this);"
                                   class="valueChanged1 tag"
                                   data-id="${f.id}">${f.name}</a>
                            </#list>
                        </div>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>主题</dt>
                    <dd class="J_dd">
                        <a class="valueChanged2 on" href="javascript:" onclick="queryForm('valueChanged2',this);">不限</a>
                        <div class="sub-nav">
                            <dl class="clearfix">
                                <dt>全年适宜：</dt>
                                <dd>
                                    <#list suitableForAllYear as sfay>
                                        <a href="javascript:" onclick="queryForm('valueChanged2',this);"
                                           class="valueChanged2 tag"
                                           data-id="${sfay.id}">${sfay.name}</a>
                                    </#list>
                                </dd>
                            </dl>
                            <dl class="clearfix">
                                <dt>季节：</dt>
                                <dd>
                                    <#list season as s>
                                        <a href="javascript:" onclick="queryForm('valueChanged2',this);"
                                           class="valueChanged2 tag"
                                           data-id="${s.id}">${s.name}</a>
                                    </#list>
                                </dd>
                            </dl>
                            <dl class="clearfix">
                                <dt>出行方式：</dt>
                                <dd>
                                    <#list travelMode as t>
                                        <a href="javascript:;" onclick="queryForm('valueChanged2',this);"
                                           class="valueChanged2 tag"
                                           data-id="${t.id}">${t.name}</a>
                                    </#list>
                                </dd>
                            </dl>
                        </div>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>天数</dt>
                    <dd class="J_dd">
                        <a class="valueChanged3 on" href="javascript:" onclick="queryForm('valueChanged3',this);">不限</a>
                        <#list numberOfDays as n>
                            <a href="javascript:;" onclick="queryForm('valueChanged3',this);" class="valueChanged3 tag"
                               data-id="${n.id}">${n.name}</a>
                        </#list>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <!--数据-->
    <form action="/destination/travelFilter" method="post" id="searchForm">
        <input type="hidden" name="tagId" id="tagId" value="${tagId!}">
        <input type="hidden" name="currentPage" id="currentPage" value="1">
    </form>


    <div class="row-list">
        <div class="wrapper">
            <ul class="clearfix">
                <#list (pageInfo.list)! as d>
                    <li class="item">
                        <div class="img">
                            <a href="/destination/guide?id=${(d.id)!}" target="_blank"><img height="200" width="320"
                                                                                            src="${(d.coverUrl)!}"
                                                                                            style="display: inline;">
                                <div class="title">${(d.name)!}</div>
                            </a>
                        </div>
                        <div class="info">
                            <p class="detail">${(d.info)!}</p>
                            <div class="hot">
                                <span class="label">TOP3</span>
                                <#list d.scenery as t >
                                    <a href="/scenery/detail?id=${t.id}" data-id=""
                                       target="_blank">${t.title}</a>
                                    <span class="divide"></span>
                                </#list>
                            </div>
                        </div>
                    </li>
                </#list>
            </ul>
        </div>
    </div>
    <#include "../common/footer.ftl"/>
</body>

</html>